import React, { forwardRef, useImperativeHandle } from 'react';
import { Form, Input, DatePicker, Upload, Button } from 'antd';
import { UploadOutlined, FileTextOutlined } from '@ant-design/icons';
import styles from './ApplicationForm.module.less';

const { TextArea } = Input;

const ApplicationForm = forwardRef((props, ref) => {
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    validateFields: () => form.validateFields(),
    resetFields: () => form.resetFields()
  }));

  return (
    <Form
      form={form}
      layout="vertical"
      className={styles.form}
    >
      <div className="form-section">
        <div className="section-title">
          <FileTextOutlined />
          <span>基本信息</span>
        </div>
        <Form.Item
          label="项目名称"
          name="projectName"
          rules={[{ required: true, message: '请输入项目名称' }]}
        >
          <Input placeholder="请输入项目名称" />
        </Form.Item>

        <Form.Item
          label="项目编号"
          name="projectCode"
          rules={[{ required: true, message: '请输入项目编号' }]}
        >
          <Input placeholder="请输入项目编号" />
        </Form.Item>

        <Form.Item
          label="预计验收时间"
          name="expectedTime"
          rules={[{ required: true, message: '请选择预计验收时间' }]}
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="申请说明"
          name="description"
          rules={[{ required: true, message: '请输入申请说明' }]}
        >
          <TextArea rows={4} placeholder="请输入申请说明" />
        </Form.Item>

        <Form.Item
          label="相关附件"
          name="attachments"
        >
          <Upload>
            <Button icon={<UploadOutlined />}>上传文件</Button>
          </Upload>
        </Form.Item>
      </div>
    </Form>
  );
});

export default ApplicationForm; 